<template>
	<om-page>
		<movable-area :style="{'height':height+'px','background-color':'white'}">
			<movable-view :style="{'height':viewHeight+'px','width':viewWidth+'px'}"  :x="x" :y="y" direction="all" :scale="true">
				<tree-item id="tree" :tree-data="treeData" :tree-first="true" />
			</movable-view>
		</movable-area>
	</om-page>
</template>

<script>
	import treeItem from '../../../components/treeTuY/tree-item.vue'
	export default {
		components:{treeItem},
		data() {
			return {
				x:0,
				y:0,
				viewHeight:0,
				viewWidth:0,
				treeData: [],
				distance: 0,//手指移动的距离
				scale: 1,//页面的比例
				disX:0,
				disY:0,
				positionX:0,
				positionY:0,
				updata:true,
				height:663,
				instId: '',
			};
		},
		onShow(){
			
		},
		onLoad(){
			
		},
		mounted() {
			let _that = this
			uni.setNavigationBarTitle({
				title: '机构图'
			})
			_that.om.request(
				"tinstitution/getInstChart",
				{
					instId:_that.instId 
				}
			).then(res=>{
				_that.treeData = res.value
				_that.getWidthAndHeight()
			})
		},
		methods:{
			getWidthAndHeight(){
				let _that = this
				_that.$nextTick(function(){
					const query = uni.createSelectorQuery().in(this);
					query.select('#tree').boundingClientRect(data => {
						uni.getSystemInfo({
						      success: function (res) {
								_that.viewHeight = data.height
								_that.viewWidth = data.width
								_that.x = (res.windowWidth/2) - data.width/2
						        _that.y = res.windowHeight/2 - data.height/2
						    }
						})
					}).exec();
				})
			},
			// 返回上一页
			backPage(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 双指触发开始计算出发时两个手指的坐标距离
			touchstartCallback(e) {
				// 单手指缩放开始，不做任何处理
				if (e.touches.length == 1) return;
				// 当两根手指放上去的时候，将距离(distance)初始化。
				let xMove = e.touches[1].clientX - e.touches[0].clientX;
				let yMove = e.touches[1].clientY - e.touches[0].clientY;
				//计算开始触发两个手指坐标的距离
				this.distance = Math.sqrt(xMove * xMove + yMove * yMove);
			},
			// 双指移动计算两个手指的坐标距离
			touchmoveCallback(e) {
			    // 单手指缩放不做任何操作
			    if (e.touches.length == 1) return;
			    //双手指运动 x移动后的坐标和y移动后的坐标
			    let xMove = e.touches[1].clientX - e.touches[0].clientX;
			    let yMove = e.touches[1].clientY - e.touches[0].clientY;
			    //双手指运动新的 ditance
			    let distance = Math.sqrt(xMove * xMove + yMove * yMove);
			    //计算移动的过程中实际移动了多少的距离
			    let distanceDiff = distance - this.distance;
			    let newScale = this.scale + 0.0001 * distanceDiff
				this.scale = newScale
			    // 为了防止缩放得太大，所以scale需要限制，同理最小值也是
			    if (newScale >= 5) {
			      newScale = 5
				  this.distance = distance
				  this.scale = newScale
			    }
			    //为了防止缩放得太小，所以scale需要限制
			    if (newScale <= 0.3) {
			      newScale = 0.3
				  this.distance = distance
				  this.scale = newScale
			    }
				console.log(this.scale)
			},
			// 拖拽移动
			move(e) {
				 const odiv = e.currentTarget // 获取元素
				 // 算出鼠标相对元素的位置
				 if(e.touches.length == 2) return this.touchstartCallback(e)
				 this.disX = e.touches[0].clientX - odiv.offsetLeft
				 this.disY = e.touches[0].clientY - odiv.offsetTop
			},
			// 移动中
			moving(e){
				if(e.touches.length == 2) return this.touchmoveCallback(e)
				// console.log(e)
				// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
				let left = e.touches[0].clientX - this.disX
				let top = e.touches[0].clientY - this.disY
				// 绑定元素位置到positionX和positionY上面
				this.positionX = top
				this.positionY = left
			}
		}
	}
</script>

<style lang="scss">
.tree{
    position: relative;
	overflow: hidden;
	border: 1px solid red;
    .tree-content{
		min-height: 100%;
		
		position: absolute;
		top: 0;
		left: 0;
		// transform: scale(0.5);
    }
}
movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	movable-area {
		height: 300rpx;
		width: 100%;
		background-color: #D8D8D8;
		overflow: hidden;
	}

	.max {
		width:500rpx;
		height: 500rpx;
	}
</style>
